<style lang="less" scoped>
.checkGoods {
  .prog-wrap {
    padding: 0;
    div {
      &:first-of-type {
        padding-top: 0.1rem;
      }
      &:last-of-type {
        padding-bottom: 0.1rem;
      }
    }
    p,
    label {
      font-size: 14px;
      padding: 0 0.2rem;
    }
    .BillNo {
      font-size: 16px;
      padding-top: 0.2rem;
      padding-bottom: 0.2rem;
      border-bottom: 1px solid #ccc;
    }
    .displayflex {
      label {
        color: #888;
      }
      p {
        color: #888;
        &:last-child {
          text-align: right;
        }
      }
    }
  }
  .choiced-bot {
    border: none;
  }
  img.Signed {
    margin: 0.2rem 0.2rem 0;
    width: 104px;
    height: 57px;
    zoom: 0.8;
  }
  .list-goods-warp,
  .uni-column {
    border-bottom: 1px solid #f5f5f5;
  }
  .uni-column {
    padding: 0 0.2rem 0;
    background: #fff;
  }
  .pcard {
    .uni-column{
      &:nth-last-of-type(2) {
        border-bottom: 1px solid #ddd;
      }
    }
  }
  .icon-add,
  .icon-reduce {
    padding:0;
  }
}
</style>

<template>
  <div class="checkGoods">
    <div class="prog-wrap mb30">
      <p class="BillNo">入库单号：{{todolist.billno}}</p>
      <div>
        <div class="displayflex">
          <label>制单时间：</label>
          <p class="flex1">{{todolist.billdate}}</p>
        </div>
        <div class="displayflex">
          <label>供应单位：</label>
          <p class="flex1">{{todolist.suppliername}}</p>
        </div>
          <div class="displayflex">
          <label>计划单号：</label>
          <p class="flex1">{{todolist.medplanbillno}}</p>
        </div>
        <div class="displayflex">
          <label>业务员：</label>
          <p class="flex1">{{todolist.mkstaffname}}</p>
        </div>
        <div class="displayflex">
          <label>交货数：</label>
          <p class="flex1">
            <em class="org">{{TotalCount}}</em>
          </p>
        </div>
      </div>
    </div>

    <scroller lock-x scrollbar-y use-pullup height="-199" ref="Scroller" :pullup-config="ScrollerConfig">
      <div>
        <div class="pcard mb30" v-for="item in todoDetail">
          <div class="displayflex list-goods-warp">
            <div class="pic">
              <img :src="item.PictContent | filterImg">
            </div>
            <div class="msg flex1">
              <p class="ft17">{{item.purchaser_goodsname}}</p>
              <p>{{item.purchaser_goodsspec}}</p>
              <p>
                <em class="org">{{item.purchaser_poqty}}</em>{{item.purchaser_unit}}<span v-if="item.mvstate === 'Y'">，已签收<em class="org">{{item.purchaser_mvqty || 0}}</em>{{item.purchaser_unit}}</span>
              </p>
            </div>
            <img class="Signed" src="~images/icon/tag_yqs.png" v-if="item.mvstate === 'Y'">
          </div>
          <div class="uni-column" v-if="item.purchaser_mvqty !== null && item.purchaser_poqty !== item.purchaser_mvqty">
             <popup-picker :title="'选择差异原因'" :data="RefuseReason" v-model="item.refuseId" :placeholder="''" :show-name="true"></popup-picker>
          </div>
          <div class="uni-column" v-if="item.purchaser_mvqty !== null && item.purchaser_poqty !== item.purchaser_mvqty && item.refuseId[0] === 'Other'">
            <x-textarea :max="100" :placeholder="'请输入备注信息（最多100字符）'" :autosize="true" v-model="item.refuseMemo"></x-textarea>
          </div>
          <div class="cf choiced-bot" v-if="item.mvstate === 'N'">
            <div class="f-l">实际签收：</div>
            <div class="num-selector displayflex f-l">
              <i class="iconfont icon-reduce" @click="changeNum(item, -1)"></i>
              <input number type="text" class="flex1" v-model="item.purchaser_mvqty" @input="iptBlur(item)" />
              <i class="iconfont icon-add" @click="changeNum(item, 1)"></i>
            </div>
            <div class="f-r btn" @click="SignItem(item)">
              <i class="iconfont icon-cargo"></i>签收
            </div>
          </div>
        </div>
      </div>
    </scroller>

    <div class="detail-bottom displayflex">
      <span>
        共计：<em class="red">{{TotalCounts}}</em> 个商品
      </span>
      <div class="flex1 btn-grp">
        <div @click="$router.go(-1)" class="btn gray">取消</div>
        <div @click="Next()" class="btn">确认收货</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      ScrollerConfig: {
        content: "",
        downContent: "",
        height: 0,
        loadingContent: "",
        upContent: ""
      },
      TotalCounts: 0,
      todolist: [],
      todoDetail: [],
      TotalCount: 0,
      RefuseReason:[],
    };
  },
  watch: {
    todolist:{
      handler(n ,o){
        
      },
      deep: true,
    }
  },
  computed: {},
  created() {
    this.getData();
    this.getRefuseReason();
  },
  mounted() {},
  methods: {
    getData: function() {
      let request = {
        wvbillno: this.$route.query.BillNo,
        searchWord: ""
      };
      this.Ajax.post("wxh/order/getOrderDetailList", request).then((resp) => {
        if (resp.errorCode == 0) {
          this.todolist = resp.data.bill;

          if(resp.data.billdetaillist.length > 0){
            resp.data.billdetaillist.forEach(item => {
              item.refuseId = [];
              item.refuseMemo = '';
              item.purchaser_mvqty = item.purchaser_poqty;
              this.TotalCount += item.purchaser_poqty;
            });
            this.todoDetail = resp.data.billdetaillist;
            this.amountNum();
          }
        } else {
          this.Toast({
            message: resp.message || "操作异常，请稍后重试"
          });
        }
      });
    },

    getRefuseReason(){    
      this.Ajax.post("wxh/order/getRefuseReason").then((res) => {
          if (res.errorCode == 0) {
            this.RefuseReason = [];
            let args = [];
            res.data.forEach(x => {
              let item = {};
              item.name = x.dataintroduction;
              item.value = x.datavalue;
              args.push(item);
            });
            args.push({name:'其他', value:'Other'});

            this.RefuseReason.push(args);
          } else {
            this.Toast({
              message: res.message || "操作异常，请稍后重试"
            });
          }
        }
      );
    },

    //加减
    changeNum: function(item, way) {
      if (way > 0) {
        if (item.purchaser_mvqty < item.purchaser_poqty) {
          item.purchaser_mvqty++;
        } else {
          this.Toast({ message: "签收件数不得大于总件数" });
        }
      } else if (way < 0 && item.purchaser_mvqty > 0) {
        item.purchaser_mvqty--;
      } else {
        this.Toast({
          message: "请输入大于0的数"
        });
      }
      this.amountNum();
    },

    //数量输入框
    iptBlur(item) {
      if(item.purchaser_mvqty === ""){
        item.purchaser_mvqty = 0;
      }
      if (item.purchaser_mvqty > item.purchaser_poqty) {
        item.purchaser_mvqty = item.purchaser_poqty;
        this.Toast({ message: "签收件数不得大于总件数" });
      }
      item.purchaser_mvqty = parseInt(item.purchaser_mvqty);
      this.amountNum();
    },

    amountNum() {
      this.TotalCounts = 0;
      this.todoDetail.forEach(x => {
        let qty = x.purchaser_mvqty || 0;
        this.TotalCounts += qty;
      });
    },
    //签收
    SignItem(item){
      let query = [{
        accqty: item.purchaser_mvqty, //purchaserMvqty//当前商品的实收数量
        rejqty: item.purchaser_poqty - item.purchaser_mvqty, //purchaserRejectqty//当前商品的拒收数量
        wvbilldetailno: item.rowno,
        wvbillno: item.billno,
        otherrejlist: [{
          rejectionreason: item.refuseId[0] || '',
          rejectionpict: '[]',
          varchar1: item.refuseMemo || '',
        }]
      }];
      this.Ajax.post("wxh/order/saveMvOrderDetail", JSON.stringify(query)).then((res) => {
        console.log(res);
        if(res.errorCode == 0) {
          this.Toast({
            message: "签收完成",
          });
          item.mvstate = 'Y';
        } else {
          this.Toast({
            message: res.message || "操作异常，请稍后重试"
          });
        }
      });
    },
    //继续签收
    Next() {
      var self = this;
      var billnoQC = self.$route.query.BillNo;
      this.Ajax.post("wxh/order/checkMvOrder", { mvbillno: billnoQC }).then(
        resp => {
          if (resp.errorCode == 0) {
            this.$router.push({
              path: "SignOrder",
              query: {
                BillNo: this.$route.query.BillNo,
                pkgs: this.TotalCounts
              }
            });
          } else {
            this.Toast({
              message: resp.message || "操作异常，请稍后重试"
            });
          }
        }
      );
    }
  }
};
</script>